<template>
  <link rel="stylesheet" href="/assets/css/indent-details.css" />
  <!-- 导航栏 -->
  <van-nav-bar title="退款详情" left-text="返回" left-arrow @click-left="back" fixed z-index="100" />


  <div class="con">
    <!-- 退款流程 -->
    <van-steps direction="vertical" :active="active">
      <h2 style="padding-top: 1em;">请等待商家处理</h2>
      <div v-if="backs.back.status == 1">
        <van-step style="padding-bottom: 2em;">
          <h3>已发出退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>商家通过退货申请</h3>
        </van-step>
      </div>
      <div v-if="backs.back.status == 2">
        <van-step style="padding-bottom: 2em;">
          <h3>已发出退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>商家通过退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>发物流，待商家确认收货</h3>
        </van-step>
      </div>
      <div v-if="backs.back.status == -1">
        <van-step style="padding-bottom: 2em;">
          <h3>已发出退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>商家不通过退款</h3>
        </van-step>
      </div>

      <div v-if="backs.back.status == 3">
        <van-step style="padding-bottom: 2em;">
          <h3>已发出退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>商家通过退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>发物流，待商家确认收货</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>确认收货，待退款</h3>
        </van-step>
      </div>

      <div v-if="backs.back.status == 4">
        <van-step style="padding-bottom: 2em;">
          <h3>已发出退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>商家通过退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>发物流，待商家确认收货</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>确认收货，待退款</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>确认退款</h3>
        </van-step>
      </div>

      <div v-if="backs.back.status == 5">
        <van-step style="padding-bottom: 2em;">
          <h3>已发出退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>商家通过退货申请</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>发物流，待商家确认收货</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>确认收货，待退款</h3>
        </van-step>
        <van-step style="padding-bottom: 2em;">
          <h3>确认退款</h3>
        </van-step>
      </div>


    </van-steps>
    <h2 style="padding-top: 1em;">退款信息</h2>
    <!-- 退款信息 -->
    <div class="botto" v-for="product in info.product">

      <van-card :num="product.nums" :price="product.total" :title="product.info.name" :thumb="product.info.cover_cdn">
      </van-card>
    </div>
    <van-button v-if="backs.back.status == 2" type="danger" @click="danhao">填写退货单号
    </van-button>
  </div>


  <!-- 填写退货单号 -->
  <van-dialog v-model:show="show" title="请填写真实有效物流号" show-cancel-button @confirm="confirm">
    <input value="" style="width:100%;border: 0; border-bottom: 1px solid #000;" class="input">
  </van-dialog>

  <van-pull-refresh success-text="刷新成功" @refresh="onRefresh" head-height pull-distance disabled>
  </van-pull-refresh>

  <!-- 底部弹出层 -->
  <van-popup v-model:show="Listshow" round position="bottom">
    <van-picker :columns="areaList" @cancel="Listshow = false" @confirm="onConfirm" />
  </van-popup>
</template>

<script>

  export default {
    name: 'OrderSales',
    created() {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0;
      this.BackData();
      this.OrderData();
    },
    data() {
      return {
        Listshow: false,
        backid: 0,
        loading: false,
        show: false,
        areaList: [],
        expname:'',
        orderid: 0,
        active: 0,
        LoginUser: this.$cookies.get('LoginUser'),
        backs: {
          back: {
            // 物流信息
            express: {},
            // 用户信息
            user: {},
            // 商品信息
            order: {},
          },
          product: {}
        },
        info: {
          // 物流信息
          order: {
            express: {},
          },
          // 用户信息
          address: {},
          // 商品信息
          product: [],
          // 客服号码
          contact: ''
        },
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },

      // 退货详情
      async BackData() {
        // 组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid,
        }

        var result = await this.$api.OrderBackinfo(data)

        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
          return false
        }

        this.backs = result.data
        this.backid = this.backs.back.id
        this.areaList = result.data.$express
        console.log(result.data.$express);
        this.active = result.data.back.status - 1
      },

      // 取消弹出层
      cancel() {
        this.show = false
      },

      // 退货订单详情
      async OrderData() {
        // 组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid,
        }

        var result = await this.$api.OrderInfo(data)

        if (result.code == 0) {
          //提醒信息
          this.$notify({
            type: 'error',
            message: result.msg,
            duration: 1000,
            onClose: () => {
              //返回上一个界面
              this.$router.go(-1)
            }
          })
          return false
        }

        this.info = result.data
        console.log(result.data);
      },

      // 下拉刷新
      onRefresh() {
        this.OrderData()
      },

      // 选择物流显示框
      danhao() {
        this.Listshow = true
      },

      onConfirm(value) {
        this.expname=value
        this.show = true
      },
      // 提交退货单号
      async confirm() {
        this.Listshow = false
        var expcode = $('input').val()
        var data = {
          id: this.backid,
          userid: this.LoginUser.id,
          orderid: this.orderid,
          expcode: expcode,
          expname:this.expname
        }

        var result = await this.$api.OrderCode(data)

        if (result.code == 0) {
          this.$notify({
            message: result.msg,
            duration: 1000,
          })
        } else {
          this.$notify({
            type: 'success',
            message: result.msg,
            duration: 1000,
          })
        }

        //要重新刷新一下订单列表
        this.BackData()
        this.OrderData()

      }
    }
  }
</script>
<style>
  .con {
    width: 100%;
    padding-top: 3em;
  }

  .botto {
    width: 100%;
  }

  .van-card {
    background: #fff !important;
  }
</style>